<template>
  <div>
    <div></div>
    <div style="max-height: 60vh; overflow-y: auto">
      <el-collapse v-model="activeNames" @change="handleChange" accordion>
        <el-collapse-item title="服务实例" name="1">
          <div>
            <el-table :data="serviceInstanceInfo.instanceInfos" style="width: 100%"
              :cell-style="{ textAlign: 'center' }" :header-cell-style="{ textAlign: 'center' }">
              <el-table-column prop="instanceName" label="实例名称" width="250">
              </el-table-column>
              <el-table-column prop="createTime" label="启动时间" width="230">
              </el-table-column>
              <el-table-column prop="host" label="所在节点" width="150"></el-table-column>
              <el-table-column prop="podIp" label="内网IP" width="150"></el-table-column>
              <el-table-column prop="status" label="状态" width="150"></el-table-column>
              <el-table-column prop="restart" label="重启次数" width="100">
              </el-table-column>
              <el-table-column prop="version" label="部署版本" width="100">
              </el-table-column>
              <el-table-column label="操作" width="100">
                <template slot-scope="scope">
                  <el-dropdown trigger="click" @command="(command) => {
                    handleCommand(command, scope.row);
                  }
                    ">
                    <el-button type="text" size="mini">
                      更多<i class="el-icon-arrow-down el-icon--right"></i>
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item command="showLogs">查看日志
                      </el-dropdown-item>
                      <el-dropdown-item command="execContainer">进入容器
                      </el-dropdown-item>
                      <el-dropdown-item command="deletePod">删除实例
                      </el-dropdown-item>
                      <el-dropdown-item command="event">事件</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-collapse-item>
        <el-collapse-item title="端口信息" name="2">
          <div v-for="(portInfo, index) in serviceInstanceInfo.portInfos" :key="index">
            <el-row>
              <el-col :span="6">
                <span class="spanStyle"> 协议： </span>
                <el-input :disabled="true" style="width: 120px" v-model="portInfo.protocol">
                </el-input>
              </el-col>
              <el-col :span="6">
                <span class="spanStyle"> 内部端口： </span>
                <el-input style="width: 120px" v-model="portInfo.port" disabled>
                </el-input>
              </el-col>
              <el-col :span="6">
                <span class="spanStyle"> 暴露端口： </span>
                <el-input style="width: 120px" v-model="portInfo.expose" disabled>
                </el-input>
              </el-col>
              <el-col :span="6" v-show="portInfo.enableDns">
                <span class="spanStyle"> DNS： </span>
                <el-input style="width: 120px" v-model="portInfo.dns" disabled>
                </el-input>
              </el-col>
            </el-row>
          </div>
        </el-collapse-item>
        <el-collapse-item title="资源占用" name="3">
          <div>
            <el-row>
              <el-col :span="8">
                <div style="margin-bottom: 5px">
                  <span class="spanStyle"> CPU预留:</span>
                  <el-input style="width: 150px" v-model="serviceInstanceInfo.resourceInfo.cpuRequest" disabled>
                    <template v-slot:append>核</template>
                  </el-input>
                </div>
                <div>
                  <span class="spanStyle"> CPU限制：</span>
                  <el-input style="width: 150px" v-model="serviceInstanceInfo.resourceInfo.cpuLimit" disabled>
                    <template v-slot:append>核</template>
                  </el-input>
                </div>
              </el-col>
              <el-col :span="8">
                <div style="margin-bottom: 5px">
                  <span class="spanStyle"> 内存预留： </span>
                  <el-input style="width: 150px" v-model="serviceInstanceInfo.resourceInfo.memRequest" disabled>
                    <template v-slot:append>MB</template>
                  </el-input>
                </div>
                <div>
                  <span class="spanStyle"> 内存限制： </span>
                  <el-input style="width: 150px" v-model="serviceInstanceInfo.resourceInfo.memLimit" disabled>
                    <template v-slot:append>MB</template>
                  </el-input>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-collapse-item>
        <el-collapse-item title="事件" name="4">
          <div>
            <el-table :data="serviceInstanceInfo.eventInfos" stripe style="width: 100%"
              :cell-style="{ textAlign: 'center' }" :header-cell-style="{ textAlign: 'center' }">
              <el-table-column prop="type" label="类型" width="100">
              </el-table-column>
              <el-table-column prop="time" label="时间" width="180">
              </el-table-column>
              <el-table-column prop="reason" label="原因" width="180">
              </el-table-column>
              <el-table-column prop="note" label="日志"></el-table-column>
            </el-table>
          </div>
        </el-collapse-item>
        <el-collapse-item title="操作信息" name="5">
          <div>
            <div>
              <el-table :data="serviceInstanceInfo.operateInfos" style="width: 100%"
                :cell-style="{ textAlign: 'center' }" :header-cell-style="{ textAlign: 'center' }" stripe>
                <el-table-column prop="userName" label="用户名称" width="140rem">
                </el-table-column>
                <el-table-column prop="targetName" label="目标名称" width="160rem">
                </el-table-column>
                <el-table-column label="目标类型" width="130rem">
                  <template slot-scope="scope">
                    {{ getOperationType(scope.row.targetType) }}
                  </template>
                </el-table-column>
                <el-table-column prop="operatorIp" label="操作IP" width="180rem">
                </el-table-column>
                <el-table-column label="应用类型" width="130rem">
                  <template slot-scope="scope">
                    {{ getAppType(scope.row.appType) }}
                  </template>
                </el-table-column>
                <el-table-column label="日志信息">
                  <template slot-scope="scope">
                    <el-tooltip effect="dark" :content="scope.row.logInfo" placement="bottom"
                      popper-class="tooltipClass">
                      <div class="descSpan" style="text-align: left">
                        {{ scope.row.logInfo }}
                      </div>
                    </el-tooltip>
                  </template>
                </el-table-column>
                <el-table-column prop="updateTime" label="创建时间" width="180rem">
                </el-table-column>
              </el-table>
            </div>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
    <div v-if="showEventDetail">
      <el-dialog title="事件信息" :append-to-body="true" :close-on-press-escape="false" :close-on-click-modal="false"
        :destroy-on-close="true" :visible.sync="showEventDetail" style="z-index: 10000">
        <div style="height: 45vh; overflow-y: auto">
          <el-table :data="tableData" style="width: 100%" :cell-style="{ textAlign: 'center' }"
            :header-cell-style="{ textAlign: 'center' }">
            <el-table-column prop="type" label="类型" width="90">
            </el-table-column>
            <el-table-column prop="reason" label="原因" width="90">
            </el-table-column>
            <el-table-column prop="note" label="详情"></el-table-column>
            <el-table-column prop="time" label="时间" width="190">
            </el-table-column>
          </el-table>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getTenantId } from "@/utils/tenantId";

export default {
  name: "ServiceInstanceDetailDialog",
  props: ["serviceInstance"],
  data() {
    return {
      activeNames: ["1"],
      tableData: [],
      namespace: "",
      podinteractiveIp: "",
      podName: "",
      containerName: "",
      deleteInfo: {
        namespace: "",
        podName: "",
      },
      showEventDetail: false,
      serviceInstanceInfo: {
        eventInfos: [],
        instanceInfos: [],
        portInfos: [],
        resourceInfo: [],
        operateInfos: [],
      },
    };
  },

  methods: {
    handleChange(val) {
      console.log(val);
    },
    getServiceInstanceDetailInfo() {
      this.$appManageApi
        .getDeployDetail(this.serviceInstance.id)
        .then((res) => {
          console.log("--=====", res);
          if (res && res.code === 200) {
            this.serviceInstanceInfo = res.data;
            this.podinteractiveIp =
              this.serviceInstanceInfo.instanceInfos[0].clusterPodInter;
            this.podName =
              this.serviceInstanceInfo.instanceInfos[0].instanceName;
            this.containerName =
              this.serviceInstanceInfo.instanceInfos[0].containerName;
            this.containerId =
              this.serviceInstanceInfo.instanceInfos[0].containerId;
          }
        });
      this.$tenantManageApi
        .getTenantNameById(getTenantId())
        .then((response) => {
          this.namespace = response.data;
        })
        .catch((error) => {
          console.error(error);
        });
    },
    handleCommand(command, row) {
      if (command === "showLogs") {
        this.showLogsInfo(row);
      } else if (command === "execContainer") {
        this.execContainer(row);
      } else if (command === "deletePod") {
        this.deleteDeployInfo();
      } else if (command === "event") {
        this.showEventInfo(row);
      }
    },
    showLogsInfo(row) {
      const logsInfo = {
        namespace: this.namespace,
        podName: row.instanceName,
        podIp: row.podIp,
      };
      this.$appManageApi.viewPodLogs(logsInfo).then((res) => {
        if (res && res.code === 200) {
          window.open(res.data);
        }
      });
    },
    execContainer(row) {
      const podInfo = {
        podIp: row.podIp,
        namespace: this.namespace,
      };
      this.$appManageApi.execPodContainer(podInfo).then((res) => {
        if (res && res.code === 200) {
          window.open(res.data);
        }
      });
    },
    deleteDeployInfo() {
      this.deleteInfo.namespace = this.namespace;
      this.deleteInfo.podName = this.podName;
      this.$appManageApi.deleteDeploy(this.deleteInfo).then((res) => {
        if (res && res.code === 200) {
          setTimeout(() => {
            this.$message.success(res.data);
            this.getServiceInstanceDetailInfo();
          }, 1000);
        }
      });
    },
    showEventInfo(row) {
      this.showEventDetail = true;
      this.deleteInfo.namespace = this.namespace;
      this.deleteInfo.podName = row.instanceName;
      this.$appManageApi.getEventInfo(this.deleteInfo).then((res) => {
        if (res && res.code === 200) {
          this.tableData = res.data;
        }
      });
    },
    getAppType(operateTarget) {
      const statusMap = {
        0: "资源管理中心",
        1: "应用商店",
        2: "容器管理平台",
      };
      return statusMap[operateTarget] || "未知类型";
    },
    getOperationType(operateTarget) {
      const statusMap = {
        0: "认证操作",
        1: "添加操作",
        2: "删除操作",
        3: "修改操作",
        4: "服务实例操作",
        5: "服务组实例操作",
      };
      return statusMap[operateTarget] || "未知类型";
    },
  },
  beforeMount() {
    this.getServiceInstanceDetailInfo();
  },
};
</script>

<style scoped></style>
